import {PlusOutlined} from '@ant-design/icons';
import {
  Button,
  Divider,
  message,
  Select,
  Popconfirm,
  Upload,
  Table,
  Tabs,
  Image,
  Descriptions,
  TreeSelect, Input,
} from 'antd';
import React, {useState, useRef, useEffect, Component} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import CreateForm from './components/CreateForm';
import styles from '../../../global.less';
import {
  queryRule,
  updateRule,
  addRule,
  removeRule,
  updateCommodity,
  BrandRule,
  ClassRule,
  querySales,
  exportCommodity,
  getStore,
  getCommodityDetails,
  exportRefund
} from './service';
import CommodityCreatingSteps from '../CommodityCreatingSteps';
import CommodityItem from '../CommodityItems';
import {UploadOutlined, DownloadOutlined} from '@ant-design/icons';
import defaultSetting from '@/../config/defaultSettings';
import moment from 'moment';
import {money_trans, saveFileAs, transTitle} from '@/utils/utils';
import request from '@/utils/request';
import Access from '@/components/Access/Access';
import {exportCheck} from "@/pages/SupplyChainManagement/StockCheck/service";
/**
 * 添加节点
 *
 * @param fields
 */

const handleAdd = async (fields) => {
  const hide = message.loading('正在添加');

  try {
    await addRule({...fields});
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};
/**
 * 更新节点
 *
 * @param fields
 */

const handleUpdate = async (fields) => {
  const hide = message.loading('正在配置');

  try {
    await updateRule({
      name: fields.name,
      desc: fields.desc,
      key: fields.key,
    });
    hide();
    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};
/**
 * 删除节点
 *
 * @param selectedRows
 */

const handleRemove = async (selectedRows, actionRef) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeRule(selectedRows);
    hide();
    message.success('删除成功，即将刷新');
    actionRef.current.reload();
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};
const {TabPane} = Tabs;
const {Option} = Select;
const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [UpDataState, handleUpDataState] = useState(false);
  const [goodsId, handleGoodsId] = useState();
  const [typeModalVisible, handleTypeModalVisible] = useState(false);
  const [typeIntegModalVisible, handleTypeIntegModalVisible] = useState(false);
  const [goodsInteg, handleGoodsInteg] = useState();
  const [stepFormValues, setStepFormValues] = useState({});
  const actionRef = useRef();
  const salesRef = useRef();
  const [count, setCount] = useState();
  const [Brand, setBrand] = useState([]);
  const [classIfiCation, setClassIfiCation] = useState([]);
  const [uploadLoading, setUploadLoading] = useState(false);
  const [create, handleCreate] = useState(false);
  const [revise, setReviseState] = useState(false);
  const [salesModal, setSalesModal] = useState(false);
  const [salesId, setSalesId] = useState(null);
  const [rowKey, setRowKey] = useState([]);
  const [outModal, handleOutModal] = useState(false);
  const [storeArray, handleStoreArray] = useState([]);
  const [tabsKey, setTabsKey] = useState('1');
  const [commodityModal, handleCommodityModal] = useState(false);
  const [commodityDetails, handleCommodityDetails] = useState({});
  const [exportRecords, setExportRecords] = useState(false);
  const [recordOutModal, handleRecordOutModal] = useState(false);

  const handleCommodity = (payload) => {
    updateCommodity(payload).then((res) => {
      const {code} = res;
      code === 0 ? actionRef.current.reload() : null;
    });
  };
  const handleBrand = () => {
    BrandRule()
      .then((res) => {
        const {code} = res;
        return code === 0 ? setBrand(res.data) : message.error(res.message);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const handleClass = () => {
    ClassRule()
      .then((res) => {
        const {code} = res;
        return code === 0
          ? (transTitle(res.data, true), setClassIfiCation(res.data))
          : message.error(res.message);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const uploadOnChange = (info) => {
    setUploadLoading(true);
    if (info.file.status === 'done') {
      setUploadLoading(false);
      const {
        file: {
          response: {code},
        },
      } = info;
      if (code === 0) {
        actionRef.current.reload();
        message.success('导入成功');
      } else {
        message.error(info.file.response.message);
      }
    } else {
      // message.error('导入失败请重试！');
    }
  };
  // const handleSales=()=>{
  //   querySales().then(res => {
  //     console.log(res);
  //   }).catch(err => {

  //   })
  // }
  const handleRowKey = (payload) => {
    const arr = [];
    payload.map((item) => {
      arr.push(item.storeId);
    });
    return arr;
  };
  const changeTime = (e) => {
    setTabsKey(e);
    salesRef.current.reload();
  };
  const renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };

    return obj;
  };
  const handleDetails = (params) => {
    getCommodityDetails(params)
      .then((res) => {
        console.log(res);
        const {code} = res;
        return code === 0 ? handleCommodityDetails(res.data) : message.info(res.message);
      })
      .catch((err) => {
        message.info(err);
        console.log(err);
      });
  };
  const handleStore = () => {
    getStore()
      .then((res) => {
        const {code} = res;
        return code === 0 ? handleStoreArray(res.data) : message.info(res.message);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    handleBrand();
    handleClass();
    handleStore();
  }, []);
  const outColumns = [
    // {
    //   title: '品项名称',
    //   dataIndex: 'goodsItemId',
    //   renderFormItem: (item, { defaultRender, ...rest }, form) => {
    //     return (
    //       <Select placeholder="选择品项" allowClear>
    //         {Brand.map((item) => {
    //           return (
    //             <Option value={item.id} key={item.id}>
    //               {item.name}
    //             </Option>
    //           );
    //         })}
    //       </Select>
    //     );
    //   },
    // },
    {
      title: '店铺名称',
      dataIndex: 'storeId',
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          <Select
            placeholder="选择店铺"
            allowClear
            showSearch
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {storeArray.map((item) => {
              return (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        );
      },
    },
  ];
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '商品名称为必填项',
          },
        ],
      },
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
    },
    {
      title: '商品条码',
      dataIndex: 'barCode',
    },
    {
      title: '品牌',
      dataIndex: 'brandId',
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          <Select placeholder="选择品牌" allowClear>
            {Brand.map((item) => {
              return (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        );
      },
      render: (_, record) => {
        return <div>{record.brandName}</div>;
      },
    },
    // {
    //   title: '查询临期商品',
    //   hideInTable: true,
    //   hideInForm: true,
    //   dataIndex: 'Temporary',
    //   renderFormItem: (item, { defaultRender, ...rest }, form) => {
    //     return (
    //       <Select placeholder="选择是否临期" allowClear>
    //         <Option value={true} key={1}>
    //           是
    //         </Option>
    //         <Option value={false} key={2}>
    //           否
    //         </Option>
    //       </Select>
    //     );
    //   },
    // },
    {
      title: '库存数量',
      hideInSearch: true,
      hideInTable: true,
      dataIndex: 'count',
    },
    {
      title: '商品描述',
      hideInSearch: true,
      hideInTable: true,
      dataIndex: 'description',
    },
    {
      title: '折扣',
      hideInSearch: true,
      hideInTable: true,
      dataIndex: 'discount',
    },
    // {
    //   title: '是否优惠',
    //   dataIndex: 'isPre',
    //   valueEnum: {
    //     false: {
    //       text: '否',
    //       status: 'Default',
    //     },
    //     true: {
    //       text: '是',
    //       status: 'Success',
    //     },
    //   },
    //   renderFormItem: (item, { defaultRender, ...rest }, form) => {
    //     return (
    //       <Select placeholder="请选择是否优惠">
    //         <Option value={true}>是</Option>
    //         <Option value={false}>否</Option>
    //       </Select>
    //     );
    //   },
    // },
    // {
    //   title: '是否促销',
    //   dataIndex: 'isPro',
    //   valueEnum: {
    //     false: {
    //       text: '否',
    //       status: 'Default',
    //     },
    //     true: {
    //       text: '是',
    //       status: 'Success',
    //     },
    //   },
    //   renderFormItem: (item, { defaultRender, ...rest }, form) => {
    //     return (
    //       <Select placeholder="请选择是否促销">
    //         <Option value={true}>是</Option>
    //         <Option value={false}>否</Option>
    //       </Select>
    //     );
    //   },
    // },

    {
      title: '品类名称',
      dataIndex: 'categoryId',
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          // <Select placeholder="选择品类" allowClear>
          //   {classIfiCation.map((item) => {
          //     return (
          //       <Option value={item.id} key={item.id}>
          //         {item.name}
          //       </Option>
          //     );
          //   })}
          // </Select>
          <TreeSelect
            showSearch
            dropdownStyle={{maxHeight: 800, overflow: 'auto'}}
            allowClear
            treeDataSimpleMode
            key="key"
            treeData={classIfiCation}
            treeNodeFilterProp="title"
            treeNodeLabelProp="title"
          />
        );
      },
      render: (_, record) => {
        return <div>{record.categoryName}</div>;
      },
    },
    {
      title: '规格',
      hideInSearch: true,
      render: (_, record) => {
        const spec = [];
        record.goodsItemList.map((item) => {
          spec.push(item.spec);
        });
        return <div>{spec.join()}</div>;
      },
    },
    {
      title: '是否赠送积分',
      dataIndex: 'isIntegral',
      hideInSearch: true,
      valueEnum: {
        false: {
          text: '否',
          status: 'Default',
        },
        true: {
          text: '是',
          status: 'Success',
        },
      },
    },

    {
      title: '标价',
      hideInSearch: true,
      dataIndex: 'price',
      render: (_, record) => {
        return money_trans(record.price);
      },
    },

    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: {
          text: '下架',
          status: 'Default',
        },
        1: {
          text: '上架',
          status: 'Success',
        },
      },
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          <Select placeholder="请选择是否上架" allowClear>
            <Option value={1}>上架</Option>
            <Option value={0}>下架</Option>
          </Select>
        );
      },
    },
    {
      title: '店铺名称',
      hideInSearch: true,
      dataIndex: 'storeName',
      hideInForm: true,
      hideInTable: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        return (
          <>
            <Access accessKey={"@updateGoods"}>
              <a
                onClick={() => {
                  record.expireDate = record.expireDate ? moment(record.expireDate) : null;
                  record.generatedDate = record.generatedDate ? moment(record.generatedDate) : null;
                  record.step = 3;
                  setStepFormValues(record);
                  handleCreate(true);
                  setReviseState(true);
                }}
              >
                修改
              </a>
              <Divider type="vertical"/>
            </Access>
            <Access accessKey={"@deleteGoods"}>
              <Popconfirm
                placement="top"
                title="确定要删除吗?"
                onConfirm={() => {
                  handleRemove(record.id, actionRef);
                }}
                okText="确定"
                cancelText="取消"
              >
                <a>删除</a>
              </Popconfirm>
              <Divider type="vertical"/>
            </Access>
            <Access accessKey={"@upDownGoods"}>
              <a
                onClick={() => {
                  const list = {
                    id: record.id,
                    status: record.status === 0 ? 1 : 0,
                  };
                  handleCommodity(list);
                }}
              >
                {record.status === 0 ? '上架' : '下架'}
              </a>
              <Divider type="vertical"/>
            </Access>
            <Access accessKey={"@goodsStockManager"}>
              <a
                onClick={() => {
                  handleGoodsId(record.id);
                  handleTypeModalVisible(true);
                }}
              >
                修改库存
              </a>
              <Divider type="vertical"/>
            </Access>

            <Access accessKey={"@updateGoodsIntegral"}>
              <a
                onClick={() => {
                  handleGoodsId(record.id);
                  handleGoodsInteg(record.goodsIntegral);
                  handleTypeIntegModalVisible(true);
                }}
              >
                积分价值
              </a>
            </Access>

          </>
        );
      },
    },
  ];
  const salesColumns = [
    {
      title: '销售店铺',
      dataIndex: 'storeName',
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
      width: 200,
    },
    {
      title: '商品',
      colSpan: 1,
      dataIndex: 'goodsItemList',
      render: (value, row, index) => {
        const obj = {
          children: value[0].goodsItemName,
          props: {},
        };
        return obj;
      },
      hideInSearch: true,
      width: 400,
    },
    {
      title: '销售数量',
      dataIndex: 'count',
      key: 'count',
      render: (_, record) => {
        return <span>{record.goodsItemList[0].count}</span>;
      },
      width: 100,
      hideInSearch: true,
    },
    {
      title: '销售单价',
      dataIndex: 'price',
      key: 'price',
      render: (_, record) => {
        return money_trans(record.goodsItemList[0].price);
      },
      width: 100,
      hideInSearch: true,
    },
    {
      title: '销售总价',
      dataIndex: 'amount',
      key: 'amount',
      render: (_, record) => {
        return money_trans(record.goodsItemList[0].amount);
      },
      width: 100,
      hideInSearch: true,
    },
  ];
  const fieldColumns = [
    {
      title: '属性名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '属性名称为必填项',
          },
        ],
      },
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
    },
    {
      title: '属性值',
      hideInSearch: true,
      dataIndex: 'value',
    },
  ];
  const GoodsItemColumns = [
    {
      title: '品项名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '属性名称为必填项',
          },
        ],
      },
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
    },
    {
      title: '成本价',
      dataIndex: 'cost',
    },
    {
      title: '积分价',
      hideInSearch: true,
      dataIndex: 'integralPrice',
      render: (dom) => {
        return money_trans(dom);
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '标价为必填项',
          },
        ],
      },
    },
    {
      title: '会员价',
      hideInSearch: true,
      dataIndex: 'memberPrice',
      render: (dom) => {
        return money_trans(dom);
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '标价为必填项',
          },
        ],
      },
    },
    {
      title: '标价',
      hideInSearch: true,
      dataIndex: 'price',
      render: (dom) => {
        return money_trans(dom);
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '标价为必填项',
          },
        ],
      },
    },
    {
      title: '单位',
      hideInSearch: true,
      dataIndex: 'unit',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '单位为必填项',
          },
        ],
      },
    },
    {
      title: '规格',
      hideInSearch: true,
      dataIndex: 'spec',
    },

  ];
  const handleGoodsIntegOk = () => {
    message.loading('正在更新');
    request(`/goods/goods/integral/${goodsId}`, {
      method: 'POST',
      data: {
        'goodsIntegral': goodsInteg
      },
    }).then((res) => {
      console.log(res);
      actionRef.current.reload();
      handleTypeIntegModalVisible(false);
    });

  };
  const expandedRowRender = (item) => {
    const childColumns = [
      {title: '商品', dataIndex: 'goodsItemName', key: 'goodsItemName'},
      {title: '销售数量', dataIndex: 'count', key: 'count'},
      {title: '销售单价', dataIndex: 'price', key: 'price'},
      {title: '销售总价', dataIndex: 'amount', key: 'amount'},
    ];
    return <Table columns={childColumns} dataSource={item.goodsItemList} pagination={false}/>;
  };

  const recordOutColumns = [
    {
      title: '操作时间',
      dataIndex: 'recordDate',
      valueType: 'dateRange',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '操作时间为必选项',
          },
        ],
      },
    },
    {
      title: '店铺名称',
      dataIndex: 'storeId',
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          <Select
            placeholder="选择店铺"
            allowClear
            showSearch
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {storeArray.map((item) => {
              return (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        );
      },
    },
  ];

  return (
    <PageContainer className="pageContainer">
      {create ? (
        <CommodityCreatingSteps
          backTable={() => {
            handleCreate(false);
            setStepFormValues({});
          }}
          nowStep={stepFormValues}
          state={revise}
        />
      ) : (
        <ProTable
          headerTitle="商品列表"
          actionRef={actionRef}
          rowKey="id"
          scroll={{x: 1200}}
          bordered
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            <Access accessKey={"@newGoodsInfo"}>
              <Button
                type="primary"
                onClick={() => {
                  handleCreate(true);
                  setReviseState(false);
                  // handleModalVisible(true);
                }}
              >
                <PlusOutlined/> 新建商品
              </Button>
            </Access>
            ,
            <Access accessKey={"@uploadGoodsInfo"}>
              <Upload
                name="file"
                action={() => {
                  return `${defaultSetting.baseUrl}goods/import/goods`;
                }}
                listType="picture"
                showUploadList={false}
                maxCount={1}
                onChange={uploadOnChange}
                headers={{token: sessionStorage.getItem('token'), type: 'ADMIN'}}
              >
                <Button type="primary" loading={uploadLoading} icon={<UploadOutlined/>}>
                  导入商品
                </Button>
              </Upload>
            </Access>
            ,
            <Access accessKey={"@batchUploadGoodsStock"}>
              <Upload
                name="file"
                action={() => {
                  return `${defaultSetting.baseUrl}goods/import/stock`;
                }}
                listType="picture"
                showUploadList={false}
                maxCount={1}
                onChange={uploadOnChange}
                headers={{token: sessionStorage.getItem('token'), type: 'ADMIN'}}
              >
                <Button type="primary" loading={uploadLoading} icon={<UploadOutlined/>}>
                  批量上库
                </Button>
              </Upload>
            </Access>
            ,
            <Access accessKey={"@exportGoodsInfo"}>
              <Button
                danger
                onClick={() => handleOutModal(true)}
                loading={uploadLoading}
                icon={<DownloadOutlined/>}
              >
                导出商品
              </Button>
            </Access>
            ,
            <Access accessKey={"@exportStockRecords"}>
              <Button
                danger
                type="primary"
                onClick={() => {
                  handleRecordOutModal(true);
                }}
                loading={exportRecords}
                icon={< DownloadOutlined/>}
              >
                导出上库记录
              </Button>
            </Access>
            ,
          ]}
          request={(params, sorter, filter) => queryRule({...params, sorter, filter})}
          columns={columns}
          postData={(payload) => {
            const {list, total} = payload;
            setCount(total);
            return list || [];
          }}
          pagination={{
            defaultPageSize: 30,
            showSizeChanger: false,
            showTitle: false,
            total: count,
            showTotal: (total) => `共${total}条`,
          }}
        />
      )}

      <CreateForm
        width={800}
        title={UpDataState ? '修改分类' : '新增分类'}
        onCancel={() => handleModalVisible(false)}
        modalVisible={createModalVisible}
        footer={null}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={async (value) => {
            UpDataState ? (value.id = stepFormValues.id) : null;
            const success = UpDataState ? await handleUpdate(value) : await handleAdd(value);
            if (success) {
              handleModalVisible(false);

              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="id"
          bordered
          type="form"
          form={{
            initialValues: UpDataState === true ? stepFormValues : null,
            layout: 'horizontal ',
            labelAlign: 'right',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
          columns={columns}
        />
      </CreateForm>
      <CreateForm
        title={'导出信息'}
        width={800}
        footer={null}
        onCancel={() => handleOutModal(false)}
        modalVisible={outModal}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={(value) => {
            exportCommodity(value).then((res) => {
              if (res) {
                saveFileAs(res, '商品');
              }
            });
          }}
          rowKey="id"
          bordered
          type="form"
          columns={outColumns}
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
        />
      </CreateForm>
      <CreateForm
        width={1200}
        title={'修改库存'}
        onCancel={() => handleTypeModalVisible(false)}
        modalVisible={typeModalVisible}
        footer={null}
      >
        <CommodityItem id={goodsId}/>
      </CreateForm>
      <CreateForm
        width={560}
        title={'积分价值'}
        onCancel={() => handleTypeIntegModalVisible(false)}
        modalVisible={typeIntegModalVisible}
        footer={null}
      >
        <div style={{textAlign: 'center'}}>
          <Input placeholder="请输入此商品价值积分"
                 defaultValue={goodsInteg}
                 onChange={(event) => {
                   handleGoodsInteg(event.target.value)
                 }}
          />
          <Button
            style={{marginTop: '20px'}}
            type="primary"
            onClick={handleGoodsIntegOk}
          >
            确定
          </Button>
        </div>
      </CreateForm>
      <CreateForm
        width={1200}
        title={'商品信息'}
        onCancel={() => handleCommodityModal(false)}
        modalVisible={commodityModal}
        footer={null}
      >
        <Descriptions title={commodityDetails?.name}>
          <Descriptions.Item label="品牌">{commodityDetails?.brandName}</Descriptions.Item>
          <Descriptions.Item label="商品分类">{commodityDetails?.categoryName}</Descriptions.Item>
          {/* <Descriptions.Item label="商品库存">{commodityDetails?.stock}</Descriptions.Item> */}
          <Descriptions.Item label="条码号">{commodityDetails?.barCode}</Descriptions.Item>
          <Descriptions.Item label="批次号">{commodityDetails?.batchNo}</Descriptions.Item>
          <Descriptions.Item label="生产期">
            {new Date(commodityDetails?.generatedDate).toLocaleString()}
          </Descriptions.Item>
          <Descriptions.Item label="保质期">
            {new Date(commodityDetails?.expireDate).toLocaleString()}
          </Descriptions.Item>

          <Descriptions.Item label="商品描述">{commodityDetails?.description}</Descriptions.Item>
        </Descriptions>
        <Divider orientation="left">商品图片</Divider>
        <div style={{maxHeight: 212, width: '100%', overflow: 'auto', padding: '0 20px'}}>
          {commodityDetails?.goodsImgList && commodityDetails?.goodsImgList.length > 0
            ? commodityDetails.goodsImgList.map((item) => {
              return <Image width={100} key={item.id} src={item.url}/>;
            })
            : null}
        </div>
        <Divider orientation="left">商品属性</Divider>
        <Table
          pagination={false}
          rowKey="id"
          dataSource={commodityDetails?.goodsFieldList}
          columns={fieldColumns}
        />
        <Divider orientation="left">商品品项</Divider>
        <Table
          pagination={false}
          rowKey="id"
          dataSource={commodityDetails?.goodsItemList}
          columns={GoodsItemColumns}
        />
      </CreateForm>
      <CreateForm
        width={1200}
        title={'商品销售情况'}
        onCancel={() => setSalesModal(false)}
        modalVisible={salesModal}
        footer={null}
      >
        <Tabs
          defaultActiveKey="1"
          onChange={changeTime}
          style={{background: 'white', paddingLeft: 10}}
        >
          <TabPane tab="年统计" key="1"></TabPane>
          <TabPane tab="月统计" key="2"></TabPane>
          <TabPane tab="周统计" key="3"></TabPane>
          <TabPane tab="日统计" key="4"></TabPane>
        </Tabs>
        <ProTable
          actionRef={salesRef}
          rowKey="storeId"
          scroll={{x: 1000}}
          bordered
          search={{
            labelWidth: 120,
          }}
          request={(params) => {
            const nowDate = moment(new Date()).day(1).format('YYYY-MM-DD');
            const dateArray = nowDate.split('-');
            const weekTime = moment(new Date()).day(0).format('YYYY-MM-DD');
            const weekEnd = moment(new Date()).day(6).format('YYYY-MM-DD');
            const monthTime = moment(new Date(dateArray[0], Number(dateArray[1]) - 1, 1)).format(
              'YYYY-MM-DD',
            ); // 当月第一天
            const monthEnd = moment(new Date(dateArray[0], Number(dateArray[1]), 0)).format(
              'YYYY-MM-DD',
            ); // 当月最后一天

            const yearStart = `${new Date().getFullYear()}-01-01`;
            const yearEnd = `${new Date().getFullYear()}-12-31`;
            delete params.pageSize;
            delete params.current;
            switch (tabsKey) {
              case '1':
                params.startTime = yearStart;
                params.endTime = yearEnd;
                break;
              case '2':
                params.startTime = monthTime;
                params.endTime = monthEnd;
                break;
              case '3':
                params.startTime = weekTime;
                params.endTime = weekEnd;
                break;
              case '4':
                params.startTime = nowDate;
                params.endTime = nowDate;
                break;
              default:
                break;
            }

            return querySales({...params}, salesId);
          }}
          // expandable={{ expandedRowRender }}
          // expandedRowKeys={rowKey}
          columns={salesColumns}
          postData={(payload) => {
            setRowKey(handleRowKey(payload));
            return payload || [];
          }}
          pagination={{
            defaultPageSize: 20,
            showSizeChanger: false,
            showTitle: false,
          }}
        />
      </CreateForm>
      <CreateForm
        title={'导出信息'}
        width={800}
        footer={null}
        onCancel={() => {
          handleRecordOutModal(false);
        }}
        modalVisible={recordOutModal}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={(value) => {
            handleOutModal(false);
            setExportRecords(true);
            handleRecordOutModal(false);
            exportRefund(value).then((res) => {
              if (res) {
                saveFileAs(res, '上库记录');
              }
              setExportRecords(false);

            });
          }}
          rowKey={r=>r.id}
          bordered
          type="form"
          columns={recordOutColumns}
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
